<template>
  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="tel-icon-arrow-right" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home/:username'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>互评测试</el-breadcrumb-item>
    </el-breadcrumb>

    <span class="Welcome">
      欢迎进入互评测试模块，请根据你的认知为你熟悉的同伴打分！
    </span>

    <template>
      <!--1、data获取数据。2、定义height即可固定表头-->
      <el-table
          class="TableList"
          :data="tableData"
          height="320"
          style="width: 70%">

        <el-table-column
            label="姓名"
            width="180">
          <!--slot-scope可以获取到table内的数据-->
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="学号"
            width="150">
          <!--slot-scope可以获取到table内的数据-->
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.numID }}</span>
          </template>
        </el-table-column>


        <el-table-column
            label="性别"
            width="180">
          <!--slot-scope可以获取到table内的数据-->
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sex }}</span>
          </template>
        </el-table-column>


        <el-table-column label="评价状态" width="180" >
          <template slot-scope="scope">
            <!--获取表格的数据：scope.$index:获取每一行的index、scpoe.row:获取每一行的数据-->
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">进入评价</el-button>
          </template>
        </el-table-column>



      </el-table>
    </template>

  </div>


</template>

<script>
export default {
  name: "NameList",

  data() {
    return {
      tableData: [{
        name: '董腾腾',
        numID:111222,
        sex:'男',
        status:'进入评价',
      }, {
        name: '秋小香',
        numID:223333,
        sex:'女',
        status:'进入评价',
      }, {
        name: '冯宇',
        numID:666666,
        sex:'男',
        status:'进入评价',
      }, {
        name: '卓泓毅',
        numID:212231,
        sex:'男',
        status:'进入评价',
      }, {
        name: '黄雅婷',
        numID:567891,
        sex:'女',
        status:'进入评价',
      }, {
        name: '李静远',
        numID:888888,
        sex:'男',
        status:'进入评价',
      }]
    }
  },

  methods:{
    handleEdit(index, row) {
      this.$router.push({name:"Others",params:row});
    }
  }
}
</script>

<style scoped>
.Welcome{
  width: 100%;
  font-size: 25px;
  margin-left: 15px;
  margin-top: 30px;
}

.TableList{
  margin-top: 50px;
  margin-left: 130px;
}

</style>
